<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-table :data="menu" height="750" border style="width:100%">
            <el-table-column type="index" width="90" align="center"></el-table-column>
            <el-table-column label="菜单项" align="center" width="180">
              <template scope="scope">
                <div>
                  <img :src="scope.row.icon">
                </div>
                <span v-text="scope.row.name"></span>
              </template>
            </el-table-column>
            <el-table-column label="菜单项的可访问性" width="200" align="center">
              <template scope="scope">
                <el-switch v-model="scope.row.visible" :width="85" on-text="可访问" off-text="不可访问" on-color="#13ce66" off-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="菜单项内部模块的可见性">
              <template scope="scope">
                <span v-if="scope.row.children.length!=0" style="display:inline-block" v-for="(v,i) in scope.row.children" :key="i">
                  <span>
                    <el-row v-if="!v.isEvent" style="display:inline-block;width:180px">
                      {{v.name}}
                      <el-checkbox v-model="v.visible" :disabled="!scope.row.visible"></el-checkbox>
                    </el-row>
                    <el-row v-else style="display:block;width:180px;">
                      {{v.name}}
                      <el-checkbox v-model="v.visible" :disabled="!scope.row.visible"></el-checkbox>
                    </el-row>
                  </span>
                </span>
                <span v-if="scope.row.children.length==0" style="">
                  无内部模块
                </span>
              </template>
              </el-table-column/>
              <el-table-column label="操作/全选" align="center" width="200">
                <template scope="scope">
                  <span style="color:#13CE66;font-weight:bold">全选&nbsp;</span>
                  <el-checkbox @change="change(scope.row,$event)"></el-checkbox>
                </template>
              </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" style="margin-top:10px">
          <div style="float:right">
            <el-form :model="role" :rules="rules" label-width="100px">
              <el-form-item prop="roleName" label="角色名称：">
                <el-input style="width:300px" v-model="role.roleName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
                <el-button type="warning" @click="$router.push('/roleManage')">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/systemManage";
import constRouters from "@/utils/constRouter"
import {objDeepCopy} from "@/utils"
export default {
  data: () => {
    return {
      menu:[],
      role: {
        roleName: "",
        menu: ""
      },
      rules: {
        roleName: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    change(v, e) {
      v.visible = e.target.checked;
      v.children.forEach(element => {
        element.visible = e.target.checked;
      });
    },
    save() {
      this.role.menu = JSON.stringify(this.menu);
      if (this.role.roleName == null) {
        this.$message({
          showClose: true,
          message: "请输入角色名称！",
          type: "error"
        });
        return;
      }
      api.addRoleMenu(this.role).then(res => {
        this.$message({
          showClose: true,
          message: '添加成功！',
          type: 'success'
        });
        this.$router.push({path:'/roleManage'})
      });
    }
  },
  mounted(){
    this.menu = objDeepCopy(constRouters)
  }
};
</script>


<style scoped>

</style>
